<template>
  <fieldset class="lyfa">
    <p>
        留言板：
        <input type="text"  v-model="txt" />
        <button @click="sendFun()">提交</button>
    </p>
    <hr>
    <LySonCom :sonmsg='msg'/>
  </fieldset>
</template>

<script setup>
import {reactive, ref} from 'vue';
import LySonCom from './LySonCom.vue';

let msg = reactive([]);
let txt = ref('');
const sendFun =()=>{
  if (txt.value != '') {
    msg.push(txt.value);
    
  }
   
}
</script>

<style scoped>
.lyfa{
  margin: 20px auto;
  border: 1px slategrey solid;
  box-shadow: 0px 0px 5px 5px slategrey;
  width: 95%;
}
.lyfa p{
  color: slategrey;
  font-weight: 800;
  font-size: large;
}
.lyfa p input{
  border: 1px solid slategrey;
  border-radius: 4px;
  line-height: 40px;
  width: 30%;
}
.lyfa button{
  background-color: cadetblue;
  border: 0;
  border-radius: 4px;
  line-height: 40px;
  width: 10%;
  color: white;
  font-size: medium;
  margin-left: 5px;
}
.lyfa hr{
  width: 95%;
  
}
</style>